<template>
  <div style="width: 377px;position: relative;" @mouseleave="itemMouseleave(node)" @mouseenter="itemMouseenter(node)">
    <!-- 轮播图 -->
    <div style="position: relative;" v-if="node.componentModel.name=='banner'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterBanner :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterBanner>
    </div>
    <!-- 九宫格 -->
    <div style="position: relative;" v-if="node.componentModel.name=='grid'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterGrid :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterGrid>
    </div>
    <!-- 轮播通知 -->
    <div style="position: relative;" v-if="node.componentModel.name=='noticebar'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterNoticebar :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterNoticebar>
    </div>
    <!-- 富文本 -->
    <div style="position: relative;" v-if="node.componentModel.name=='richtext'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterRichtext :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterRichtext>
    </div>
    <!-- 商品九宫格 -->
    <div style="position: relative;" v-if="node.componentModel.name=='itemGrid'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemGrid :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterItemGrid>
    </div>
    <!-- 商品列表 -->
    <div style="position: relative;" v-if="node.componentModel.name=='itemList'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemList :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterItemList>
    </div>
    <!-- 分享页 -->
    <div style="position: relative;" v-if="node.componentModel.name=='share'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterShare :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterShare>
    </div>
    <!-- 商品基础信息 -->
    <div style="position: relative;" v-if="node.componentModel.name=='item-baseinfo'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemBaseinfo :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterItemBaseinfo>
    </div>
    <!-- 商品详情 -->
    <div style="position: relative;" v-if="node.componentModel.name=='item-detail'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemDetail :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterItemDetail>
    </div>
    <!-- 商品分类 -->
    <div style="position: relative;" v-if="node.componentModel.name=='itemCate'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterItemCate :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterItemCate>
    </div>
    <!-- 普通导航 -->
    <div style="position: relative;" v-if="node.componentModel.name=='navBar'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterNavBar :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterNavBar>
    </div>
    <!-- 定位导航 -->
    <div style="position: relative;" v-if="node.componentModel.name=='navBar-location'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterNavBarLocation :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterNavBarLocation>
    </div>
    <!-- 搜索框 -->
    <div style="position: relative;" v-if="node.componentModel.name=='searchBar'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterSearchBar :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterSearchBar>
    </div>
    <!-- 商户入驻 -->
    <div style="position: relative;" v-if="node.componentModel.name=='shopCheckin'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterShopCheckin :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterShopCheckin>
    </div>
    <!-- 商户分段显示 -->
    <div style="position: relative;" v-if="node.componentModel.name=='shopTabs'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterShopTabs :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterShopTabs>
    </div>
    <!-- 标题区域 -->
    <div style="position: relative;" v-if="node.componentModel.name=='title'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterTitle :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterTitle>
    </div>
    <!-- 文章区域 -->
    <div style="position: relative;" v-if="node.componentModel.name=='article'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterArticle :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterArticle>
    </div>
    <!-- 地图 -->
    <div style="position: relative;" v-if="node.componentModel.name=='map'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterMap :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterMap>
    </div>
    <!-- 文本 -->
    <div style="position: relative;" v-if="node.componentModel.name=='text'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterText :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterText>
    </div>
    <!-- 自定义区域 -->
    <div style="position: relative;" v-if="node.componentModel.name=='custom'" @click="clickComponent(index)">
      <div style="position: absolute;top: 0px;right: 0px;z-index: -1;" :id="'close'+index" @click.stop="removeComponent(index)"><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
      <placeCenterCustom :nodeModel="node" :id="index" :class="node.isMouse?'mouseenter':''"></placeCenterCustom>
    </div>
    <!-- 蒙版 -->
    <div v-if="flag==2" :class="node.isMouse?'masking':''" style="width: 100%;position: absolute;z-index: 9999;top: 0;left: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;">
      <div v-if="node.isMouse" style="background-color: blue;width: 120px;height: 30px;line-height: 30px;border-radius: 15px;color: #FFFFFF;text-align: center;cursor: pointer" @click="replaceTemplate">马上替换</div>
    </div>
  </div>
</template>
  
  <script>
    import {count} from '@/utils/count.js'
    import placeCenterBanner from '@/views/interface/composing/placeCenter/place-center-banner'
    import placeCenterGrid from '@/views/interface/composing/placeCenter/place-center-grid'
    import placeCenterNoticebar from '@/views/interface/composing/placeCenter/place-center-noticebar'
    import placeCenterRichtext from '@/views/interface/composing/placeCenter/place-center-richtext'
    import placeCenterItemGrid from '@/views/interface/composing/placeCenter/place-center-itemGrid'
    import placeCenterItemList from '@/views/interface/composing/placeCenter/place-center-itemList'
    import placeCenterShare from '@/views/interface/composing/placeCenter/place-center-share'
    import placeCenterItemBaseinfo from '@/views/interface/composing/placeCenter/place-center-item-baseinfo'
    import placeCenterItemDetail from '@/views/interface/composing/placeCenter/place-center-item-detail'
    import placeCenterItemCate from '@/views/interface/composing/placeCenter/place-center-itemCate'
    import placeCenterNavBar from '@/views/interface/composing/placeCenter/place-center-navBar'
    import placeCenterNavBarLocation from '@/views/interface/composing/placeCenter/place-center-navBar-location'
    import placeCenterSearchBar from '@/views/interface/composing/placeCenter/place-center-searchBar'
    import placeCenterShopCheckin from '@/views/interface/composing/placeCenter/place-center-shopCheckin'
    import placeCenterShopTabs from '@/views/interface/composing/placeCenter/place-center-shopTabs'
    import placeCenterTitle from '@/views/interface/composing/placeCenter/place-center-title'
    import placeCenterArticle from '@/views/interface/composing/placeCenter/place-center-article'
    import placeCenterMap from '@/views/interface/composing/placeCenter/place-center-map'
    import placeCenterText from '@/views/interface/composing/placeCenter/place-center-text'
    import placeCenterCustom from '@/views/interface/composing/placeCenter/place-center-custom'
  let lastIndex = -1
  export default {
    components: {
      placeCenterBanner,
      placeCenterGrid,
      placeCenterNoticebar,
      placeCenterRichtext,
      placeCenterItemGrid,
      placeCenterItemList,
      placeCenterShare,
      placeCenterItemBaseinfo,
      placeCenterItemDetail,
      placeCenterItemCate,
      placeCenterNavBar,
      placeCenterNavBarLocation,
      placeCenterSearchBar,
      placeCenterShopCheckin,
      placeCenterShopTabs,
      placeCenterTitle,
      placeCenterArticle,
      placeCenterMap,
      placeCenterText,
      placeCenterCustom
    },
    props:{
        flag:{
            type: [Number, String],
            default: '1'
        },
        node:{
            type: Object,
            default: res=>{}
        },
        index:{
            type: [Number, String],
            default: ''
        },
        currentTarget: {
          type: [Number, String],
          default: ''
        }
    },
    data() {
      return {
        userModel: {}
      }
    },
    created() {
      this.userModel = this.$store.getters.userModel
    },
    watch: {
      currentTarget: {
        immediate : true,
        handler(val){
          // console.log('监听currentTarget', val, this.index)
          if(val == -1){
            this.clickComponent(0)
          }else{
            this.clickComponent(val)
          }
        }
      },
    },
    methods:{
      
      clickComponent(e){
        if(this.flag == '1'){
          // console.log('触发组件点击事件', e)
          if(lastIndex > -1 && document.getElementById(lastIndex)){
            // 回复上一次选中的样式
            document.getElementById(lastIndex).style.border = ''
            document.getElementById('close'+ String(lastIndex)).style.zIndex = -1
          }
          // 设置当前选中的样式
          if (document.getElementById(e)){
            document.getElementById(e).style.border = '1px solid #00e000'
            document.getElementById('close'+ String(e)).style.zIndex = 88
          }
          
          lastIndex = e
          this.$emit('selectComponent', e)
        }else if(this.flag == "2"){
          console.log('索引', e)

        }
        
      },
      removeComponent(e){
        this.$emit('removeComponent', e)
      },
      itemMouseenter(e){
        // document.getElementById(e).style.border = '1px solid #3575fc'
        this.$set(e, 'isMouse', 1)
      },
      itemMouseleave(e){
        // document.getElementById(e).style.border = ''
        // if(lastIndex == e){
        //   document.getElementById(e).style.border = '1px solid #00e000'
        // }
        this.$set(e, 'isMouse', 0)
      },
      replaceTemplate(){
        this.$emit('replaceTemplate', this.node)
      }
    }
  }
  </script>
  
<style lang="scss" scoped>
  /* 限制单行,自动省略多余部分 */
  .limitLineNumOfOne{
    word-break:break-all;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .mouseenter{
    border: 1px solid #3575fc;
  }
  .mouseleave{
    border: 1px solid #00e000;
  }
  .masking{
    background-color: #00000033;
    height: 100%;
  }
</style>
  